<template>
	<view class="daili">
		<u-navbar
			title="代理商信息查询" 
			left-text="" 
			right-text="筛选" 
			@leftClick="onClickBack" 
			@rightClick="onClickRight"
			:placeholder="true"
			:fixed="true"
			:safeAreaInsetTop="true"
			class="nav"
		></u-navbar>
		<u-popup :show="filterTimer" @close="closeFilterTimer" mode="top">
			<view class="filterTimer">
				<view class="w-flex w-flex-between">
					<view class="startTime" @click="showTime = true" :style="showCurrStartTime !== '请选择日期'?'color:#000;font-size:14px;':''">
						<text>{{showCurrStartTime}}</text>
						<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
					</view>
					<text style="margin: 0 10px;">至</text>
					<view class="startTime" @click="showEndTime = true" :style="showCurrEndTime !== '请选择日期'?'color:#000;font-size:14px;':''">
						<text>{{showCurrEndTime}}</text>
						<u-icon name="arrow-down" color="#b3b3b3" size="14"></u-icon>
					</view>
				</view>
				<view>
					<u-datetime-picker
						:show="showTime"
						:value="startTime"
						mode="date"
						@cancel="cancel"
						@confirm="confirmTime"
						:maxDate="maxDate"
						:formatter="formatter"
					></u-datetime-picker>
					<u-datetime-picker
						:show="showEndTime"
						:value="endTime"
						mode="date"
						@cancel="cancelEndTime"
						@confirm="confirmEndTime"
						:maxDate="maxDate"
						:formatter="formatter"
					></u-datetime-picker>
				</view>
				<view class="w-flex w-flex-between w-mt-15 timerChoice">
					<text class="dateStyle" @click="timerToday">今日</text>
					<text class="dateStyle" @click="timerWeek">近一周</text>
					<text class="dateStyle" @click="timerMonth">近一月</text>
				</view>
				<view class="w-mt-15 w-flex">
					<view style="width: 25%;" class=" w-flex">
						代理商状态
					</view>
					<view class="" style="width: 75%;">
						<u-checkbox-group
							v-model="MerchantStatus"
							placement="row"
							@change="MerchantStatusChange"
							style="display: flex;flex-wrap: wrap;"
						>
							<u-checkbox
								v-for="(item, index) in MerchantStatusList"
								:key="index"
								:label="item.name"
								:name="item.name"
								style="width: 33%;"
								shape="circle"
							>
							</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="w-mt-15 w-flex">
					<text>代理商账号</text>
					<u--input
						placeholder="请输入代理商账号"
						border="surround"
						v-model="salesmanAccount"
					></u--input>
				</view>
				<view class="w-flex w-flex-between w-mt-20">
					<u-button type="primary" text="取消" class="w-w-40" @click="closeFilterTimer"></u-button>
					<u-button type="primary" text="确定" class="w-w-40"></u-button>
				</view>
			</view>
		</u-popup>
		
		<view class="bg-gray padding money">
			<view class="w-flex w-flex-between">
				<text>共计：{{info.count}}人</text>
				<navigator url="addDaili">
					<text class="cu-btn line-blue round">添加代理商</text>
				</navigator>
			</view>
		</view>
		
		
		
		<u-list class="sm-border card-menu margin-top" @scrolltolower="scrolltolower" v-if="indexList.length>0">
			<view class="cu-item" v-for="(item,index) in indexList"@click="detail(item.id)">
				<view class="action margin-bottom-xl padding-right">
					<text class="text-grey text-sm ">{{item.createtime|timeStamp}}</text>
				</view>
				<view class="content text-bold text-dd margin-bottom-xl">
					<view>登录账号：{{item.username}} <br> 代理名称：{{item.nickname}}</view>
					<text class="text-grey ">TEl:{{item.mobile}}</text>
				</view>
				
			</view>
		</u-list>
		<view class="" v-else>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
		
		
	</view>
</template>

<script>
export default {
	data() {
		return {
		
			fileList: [],
			filterTimer: false,
			showTime: false,
			showEndTime: false,
			startTime: Number(new Date().getTime() - 3600 * 1000 * 24 * 31),
			endTime: Number(new Date()),
			maxDate: Number(new Date()),
			showCurrEndTime: '请选择日期',
			showCurrStartTime: '请选择日期',
			MerchantStatus: [],
			MerchantStatusList: [
				{
					id: 1,
					name: '正常'
				},
				{
					id: 2,
					name: '冻结'
				},
				{
					id: 3,
					name: '删除'
				}
			],
			total: 0,
			salesmanAccount: '',
			info:[],
			indexList:[],
			params:{
				'page':1,
				'size':20
			},
			
		}
	},
	onLoad() {
		this.loadmore();
	},
	filters: {
		timeStamp: function(value) {
			if (!value) return '';
			var now = new Date(value*1000);
			var year = now.getFullYear();
			var month = now.getMonth() + 1;
			if (month < 10) {
				month = '0' + month
			}
			var date = now.getDate();
			if (date < 10) {
				date = '0' + date
			}
			// var h = (now.getHours() < 10 ? '0' + now.getHours() : now.getHours()) + ':';  
			// var m = (now.getMinutes() <10 ? '0' + now.getMinutes() : now.getMinutes()) + ':';  
			// var s = (now.getSeconds() <10 ? '0' + now.getSeconds() : now.getSeconds());  
			//return month + "/" + date +" "+h+m+s
			return year + "/" + month + "/" + date
		}
	},
	methods: {		
		scrolltolower() {
			this.params.page = this.params.page+1
			this.loadmore();
		},
		async loadmore() {
			const res = await this.$API({url: '/api/index/lower_dl',method:"GET", data:this.params})
			if (res.code === 1) {
				this.info = res.data
				for (let i = 0; i < res.data.list.length; i++) {
					this.indexList.push(res.data.list[i])
				}
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}
		},
		async initData() {
			this.list = []
			const res = await this.$API({
				url: '/api/index/profit_sharing',
				method: "POST"
			})
			if (res.code === 1) {
				this.info = res.data;
			}
		},
		detail (id, status) {
			uni.navigateTo({
				url: '/pages/my/costchange?id='+ id+'&type=update'
			})
		},
		// 返回页面
		onClickBack () {
			uni.navigateBack()
		},
		// 筛选日期
		onClickRight(){
			this.filterTimer = true
		},
		cancel () {
			this.showTime = false
		},
		cancelEndTime () {
			this.showEndTime = false
		},
		confirmEndTime (date) {
			this.showEndTime = false
			this.showCurrEndTime = this.format(date.value)
		},
		confirmTime (date) {
			this.showCurrStartTime = this.format(date.value)
			this.showTime = false
		},
		formatter(type, value) {
			if (type === 'year') {
					return `${value}年`
			}
			if (type === 'month') {
					return `${value}月`
			}
			if (type === 'day') {
					return `${value}日`
			}
			return value
		},
		format(time, type) {
			var time = new Date(time);
			var y = time.getFullYear();
			var m = time.getMonth()+1;
			var d = time.getDate();
			var h = time.getHours();
			var mm = time.getMinutes();
			var s = time.getSeconds();
			if (type === 'YM') {
				return y+'年'+this.add0(m)+'月';
			}
			return y+'-'+this.add0(m)+'-'+this.add0(d);
		},
		add0(m){return m<10?'0'+m:m },
		timerToday () {
			this.showCurrStartTime = this.format(Number(new Date()));
			this.showCurrEndTime = this.format(Number(new Date()));
		},
		timerWeek () {
			this.showCurrStartTime = this.format(Number(new Date().getTime() - 3600 * 1000 * 24 * 7));
			this.showCurrEndTime = this.format(Number(new Date()));
		},
		timerMonth () {
			this.showCurrStartTime = this.format(Number(new Date().getTime() - 3600 * 1000 * 24 * 31));
			this.showCurrEndTime = this.format(Number(new Date()));
		},
		MerchantStatusChange (list) {
			this.MerchantStatus = list
			console.log(list)
		},
		closeFilterTimer () {
			this.filterTimer = false
		},
		
	}
}
</script>

<style lang="scss" scoped>
	.padding-right{
		position: absolute;
		width: 100%;
		height: 100%;
		text-align: right;
	}
.daili {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #FFFFFF;
	.filterTimer {
		background: #FFFFFF;
		padding: 20rpx 30rpx;

		.startTime {
			background: #F1F1F1;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #b3b3b3;
			padding: 0 20rpx;
			width: 320rpx;
			height: 60rpx;
			border-radius: 10rpx;
			font-size: 12px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}

	.content {
		padding: 10rpx 20rpx;

		.addSalesman {
			border: 1px solid #1678ff;
			padding: 4rpx 30rpx;
			border-radius: 40rpx;
			font-size: 12px;
			color: #1678ff;
		}
		.cu-border{
			border: 1px solid #00BFFF;
		}
	}
	.listItem {
		background: #FFFFFF;
		padding: 10rpx 20rpx;
	}
}
</style>
